@import '../../../theme/style/variables.module.less';

.container {
    width: 100%;
    height: 100%;

    :global {
        .ant-btn,
        .ant-btn-primary {
            box-shadow: none;
            .flex();
        }
    }
}

.empty {
    .properties(padding-top, 48);
    .properties(padding-bottom, 48);
}

.categories {
    .properties(padding-bottom, 32);
    position: relative;
    .grid(4, 32);
    width: 100%;

    &-no-builtin {
        .grid(3, 32);
    }

    @media only screen and (max-width: @mi-lg) {
        .grid(2, 24);
        .properties(padding-bottom, 24);
        .properties(padding-left, 48);
        .properties(padding-right, 48);
    }

    @media only screen and (max-width: @mi-sm) {
        .grid(1, 16);
        padding-left: 0;
        padding-right: 0;
    }

    &-item {
        .flex(flex-start, flex-start);
        .properties(padding, 16);
        .radius(8);
        .transition();
        text-align: center;
        cursor: pointer;
        position: relative;

        @media only screen and (max-width: @mi-mlg) {
            flex-direction: column;
            align-items: center;
        }

        @media only screen and (max-width: @mi-sm) {
            .flex(flex-start, flex-start);
        }

        &-mask {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            z-index: 10;
        }

        :global {
            .anticon {
                .properties(font-size, 20);
                .properties(margin-right, 16);
                .properties(padding, 16);
                .circle();
                background-color: transparent;
            }
        }

        &-check {
            position: absolute;
            top: 0;
            right: 0;
            transform: translateY(-50%) translateX(50%);
            .properties(width, 32);
            .properties(height, 32);
            .circle();
            .flex();

            @media only screen and (max-width: @mi-sm) {
                transform: translate(-1rem, 50%);
                .properties(width, 24);
                .properties(height, 24);
            }

            :global {
                .anticon {
                    padding: 0;
                    margin: 0;
                    .properties(font-size, 16);
                    .transition();

                    @media only screen and (max-width: @mi-sm) {
                        .properties(font-size, 14);
                    }
                }
            }
        }

        &-info {
            .flex(flex-start, flex-start, column);

            @media only screen and (max-width: @mi-mlg) {
                align-items: center;
                .properties(margin-top);
            }

            @media only screen and (max-width: @mi-sm) {
                align-items: flex-start;
                margin-top: 0;
            }
        }

        &-title {
            .properties(font-size, 18);
            font-weight: bold;
        }

        &-tip {
            text-align: left;
        }

        & &-more {
            position: absolute;
            .properties(width, 24);
            .properties(height, 24);
            .properties(top, 12);
            .properties(right);
            .flex();
            cursor: pointer;
            z-index: 20;

            :global {
                .anticon {
                    background: unset;
                    color: var(--mi-language-tabs-icon-check-text-customize);
                    padding: 0;
                    margin-right: 0;
                    .properties(font-size, 24);
                    font-weight: bold;
                }
            }
        }
    }

    &-customize {
        color: var(--mi-language-tabs-text-customize);
        background-color: var(--mi-language-tabs-background-customize);

        :global {
            .anticon {
                color: var(--mi-language-tabs-icon-text-customize);
                background: var(--mi-language-tabs-icon-background-customize);
            }
        }

        &-check {
            background-color: var(--mi-language-tabs-icon-check-background-customize);

            :global {
                .anticon {
                    color: var(--mi-language-tabs-icon-check-text-customize);
                    background: unset;
                }
            }
        }

        &-tip {
            color: var(--mi-language-tabs-subtext-customize);
        }
    }

    &-builtin {
        color: var(--mi-language-tabs-text-builtin);
        background-color: var(--mi-language-tabs-background-builtin);

        :global {
            .anticon {
                color: var(--mi-language-tabs-icon-text-builtin);
                background: var(--mi-language-tabs-icon-background-builtin);
            }
        }

        &-check {
            background-color: var(--mi-language-tabs-icon-check-background-builtin);

            :global {
                .anticon {
                    color: var(--mi-language-tabs-icon-check-text-builtin);
                    background: unset;
                }
            }
        }

        &-tip {
            color: var(--mi-language-tabs-subtext-builtin);
        }
    }

    &-module {
        color: var(--mi-language-tabs-text-module);
        background-color: var(--mi-language-tabs-background-module);

        :global {
            .anticon {
                color: var(--mi-language-tabs-icon-text-module);
                background: var(--mi-language-tabs-icon-background-module);
            }
        }

        &-tip {
            color: var(--mi-language-tabs-subtext-module);
        }
    }

    &-management {
        color: var(--mi-language-tabs-text-management);
        background-color: var(--mi-language-tabs-background-management);

        :global {
            .anticon {
                color: var(--mi-language-tabs-icon-text-management);
                background: var(--mi-language-tabs-icon-background-management);
            }
        }

        &-tip {
            color: var(--mi-language-tabs-subtext-management);
        }
    }
}

.search {
    .flex();
    .transition();

    @media only screen and (max-width: @mi-lg) {
        .grid(2, 16);
        .properties(margin-bottom, 24);
        .properties(padding-left, 48);
        .properties(padding-right, 48);
    }

    @media only screen and (max-width: @mi-sm) {
        padding-left: 0;
        padding-right: 0;
    }
 
    button {
        .properties(margin-bottom, 24);

        @media only screen and (max-width: @mi-lg) {
            margin-bottom: 0;
        }

        & + button {
            .properties(margin-left, 16);

            @media only screen and (max-width: @mi-lg) {
                margin-left: 0;
            }
        }
    }
    
    &-filter {
        .properties(padding, 16);
        .properties(padding-top, 20);
        background: var(--mi-language-search-background);
        .radius(8);
        .properties(min-width, 240);
        backdrop-filter: blur(1rem);

        &-btns {
            .flex();
            .properties(padding-bottom, 4);
            .properties(padding-top, 12);

            button + button {
                .properties(margin-left);
            }
        }
    }
}

.form {
    &-tip {
        .properties(margin-right, 4);
        color: var(--mi-error);
        cursor: pointer;
    }

    &-module {
        .properties(margin-top, 24);
    }
}

.list {
    .grid(2, 24);

    @media only screen and (max-width: @mi-sm) {
        .grid(1, 24);
    }

    &-item {
        .properties(padding-left, 16);
        .properties(padding-right, 16);
        .properties(padding-top);
        .properties(padding-bottom);
        .radius();
        .flex();
        position: relative;
        background: var(--mi-language-background);
        color: var(--mi-language-text);

        &-name {
            text-align: justify;
            font-weight: bold;
        }

        &-close {
            position: absolute;
            .properties(width, 24);
            .properties(height, 24);
            .flex();
            cursor: pointer;
            .properties(right, -12);
            .properties(top, -12);
            overflow: hidden;
            .circle();
            background: var(--mi-language-background);

            :global {
                .anticon {
                    .properties(font-size, 18);
                    color: var(--mi-language-text);
                }
            }
        }

        &-edit {
            .properties(margin-left, 12);
            .properties(margin-right, 4);
            .flex();
            cursor: pointer;
        }

        &:last-child {
            margin-right: 0;
        }

        &-active {
            .gradient-hint(var(--mi-language-default-background-start), var(--mi-language-default-background-hint), var(--mi-language-default-background-end));
            color: var(--mi-language-default-text);
        }

        &-active &-close {
            .gradient-hint(var(--mi-language-default-background-start), var(--mi-language-default-background-hint), var(--mi-language-default-background-end));

            :global {
                .anticon {
                    color: var(--mi-language-default-text);
                }
            }
        }
    }
}

.select {
    &-add {
        > span {
            .properties(margin-right);
        }
    }
}

.action {
    &-btns {
        .flex();

        :global {
            .ant-btn + .ant-btn {
                .properties(margin-left);
            }
        }
    }
}

.btn {
    &-primary {
        background: var(--mi-primary);
        color: var(--mi-on-primary);
        border-color: var(--mi-primary);

        &:not(:disabled):focus,
        &:not(:disabled):hover {
            border-color: transparent;
            color: var(--mi-on-primary);
            background: var(--mi-primary);
        }
    }
    
    &-info {
        background: var(--mi-tertiary);
        color: var(--mi-on-tertiary);
        border-color: var(--mi-tertiary);

        &:not(:disabled):focus,
        &:not(:disabled):hover {
            border-color: transparent;
            color: var(--mi-on-tertiary);
            background: var(--mi-tertiary);
        }
    }

    &-warn {
        background: var(--mi-error);
        color: var(--mi-on-error);
        border-color: var(--mi-error);

        &:not(:disabled):focus,
        &:not(:disabled):hover {
            border-color: transparent;
            color: var(--mi-on-error);
            background: var(--mi-error);
        }
    }
}

.popover {
    &-form {
        :global {
            .ant-form-item {
                .properties(margin-bottom, 16);

                .ant-form-item-label {
                    padding-bottom: 0;
                }
            }
        }
    }

    &-btns {
        .flex();

        button + button {
            .properties(margin-left);
        }
    }

    &-delete {
        .properties(width, 320);
    }

    &-title {
        .flex(center, flex-start);

        :global {
            .anticon {
                .properties(margin-right);
                color: var(--mi-language-danger);
            }
        }
    }
}

.modules {
    &-tab {
        .properties(margin-top, -16);

        :global {
            .ant-tabs-nav {
                &:before {
                    display: none;
                }
            }
        }
    }

    &-title {
        .flex(center, flex-start);

        > span {
            .properties(margin-right);
        }
    }

    &-name {
        > span {
            .properties(margin-right);
        }
    }
}

.copied {
    .flex();

    :global {
        .anticon {
            .properties(margin-right, 4);
            color: var(--mi-language-copied-text);
        }
    }

    span {
        color: var(--mi-language-copied-text);
    }
}

:global {
    .ant-form {
        .ant-form-item {
            @media only screen and (max-width: @mi-sm) {
                .properties(margin-bottom, 16);

                .ant-form-item-label {
                    padding-bottom: 0;
                }
            }

            &:last-child {
                .properties(margin-bottom, 16);
            }
        }
    }

    .ant-tag {
        margin-inline-end: 0;
    }

    .ant-spin-nested-loading >div>.ant-spin {
        max-height: unset;
        .properties(min-height, 200);
        overflow: hidden;
        .radius();
        background: rgba(var(--mi-primary), 0.2);
        backdrop-filter: blur(1rem);
    }
}

:export {
    --language-tabs-text-customize: var(--mi-on-primary);
    --language-tabs-subtext-customize: rgba(var(--mi-rgb-on-primary), 0.75);
    --language-tabs-background-customize: var(--mi-primary);
    --language-tabs-icon-text-customize: var(--mi-primary);
    --language-tabs-icon-background-customize: var(--mi-on-primary);
    --language-tabs-icon-check-background-customize: var(--mi-primary);
    --language-tabs-icon-check-text-customize: var(--mi-on-primary);

    --language-tabs-text-builtin: var(--mi-on-tertiary);
    --language-tabs-subtext-builtin: rgba(var(--mi-rgb-on-tertiary), 0.75);
    --language-tabs-background-builtin: var(--mi-tertiary);
    --language-tabs-icon-text-builtin: var(--mi-tertiary);
    --language-tabs-icon-background-builtin: var(--mi-on-tertiary);
    --language-tabs-icon-check-background-builtin: var(--mi-tertiary);
    --language-tabs-icon-check-text-builtin: var(--mi-on-tertiary);

    --language-tabs-text-module: var(--mi-on-error);
    --language-tabs-subtext-module: rgba(var(--mi-rgb-on-error), 0.75);
    --language-tabs-background-module: var(--mi-error);
    --language-tabs-icon-text-module: var(--mi-error);
    --language-tabs-icon-background-module: var(--mi-on-error);

    --language-tabs-text-management: var(--mi-inverse-on-surface);
    --language-tabs-subtext-management: rgba(var(--mi-rgb-inverse-on-surface), 0.75);
    --language-tabs-background-management: var(--mi-inverse-surface);
    --language-tabs-icon-text-management: var(--mi-inverse-surface);
    --language-tabs-icon-background-management: var(--mi-inverse-on-surface);

    --language-text: var(--mi-surface);
    --language-background: var(--mi-on-surface);
    --language-default-text: var(--mi-surface);
    --language-default-background-start: var(--mi-primary);
    --language-default-background-hint: var(--mi-secondary);
    --language-default-background-end: var(--mi-tertiary);

    --language-danger: #dc4446;

    --language-search-background: rgba(var(--mi-rgb-on-primary), 0.5);

    --language-copied-text: #e9e1d9;
}